<template>
  <el-main>
    <router-view v-slot="{ Component,route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="keepAliveName">
          <component :is="Component" :key="route.path" v-if="isRouterShow" />
        </keep-alive>
      </transition>
    </router-view>
  </el-main>
</template>
<script setup>

import { useAppStore } from "@/stores/modules/desktop";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { storeToRefs } from "pinia";
import mittBus from "@/utils/mittBus.js";

const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);
const appStore = useAppStore();
const { layout } = storeToRefs(appStore);
// 注入刷新页面方法
const isRouterShow = ref(true);
mittBus.on("refresh", (bool) => (isRouterShow.value = bool));
// 监听布局变化，在 body 上添加相对应的 layout class
watch(
  () => layout.value,
  () => {
    const body = document.body;
    body.setAttribute("class", layout.value);
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.el-main {
  box-sizing: border-box;
  padding: 10px 12px;
  overflow-x: hidden;
  background-color: var(--el-bg-color-page);
}
.el-footer {
  height: auto;
  padding: 0;
}
</style>
